
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Multi-Layout Slideshow | Demo 1 </title>
		<meta name="description" content="A simple slideshow component with individual slide layouts and effects" />
		<meta name="keywords" content="slideshow, images, layout, asymmetric, css, html, javascript, template" />

		<link href="http://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/slideshow.css" />
		<link rel="stylesheet" type="text/css" href="css/slideshow_layouts.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  		<style>
			.ie-message { display: inline-block; }
  		</style>
		<![endif]-->
		<script>document.documentElement.className = 'js';</script>
	</head>
	<body>
		<svg class="hidden">
			<defs>
				<symbol id="icon-arrow" viewBox="0 0 24 24">
					<title>arrow</title>
					<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
				</symbol>
				<symbol id="icon-drop" viewBox="0 0 24 24">
					<title>drop</title>
					<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
				</symbol>
				<symbol id="icon-prev" viewBox="0 0 100 50">
					<title>prev</title>
					<polygon points="5.4,25 18.7,38.2 22.6,34.2 16.2,27.8 94.6,27.8 94.6,22.2 16.2,22.2 22.6,15.8 18.7,11.8"/>
				</symbol>
				<symbol id="icon-next" viewBox="0 0 100 50">
					<title>next</title>
					<polygon points="81.3,11.8 77.4,15.8 83.8,22.2 5.4,22.2 5.4,27.8 83.8,27.8 77.4,34.2 81.3,38.2 94.6,25 "/>
				</symbol>
				<symbol id="icon-octicon" viewBox="0 0 24 24">
					<title>octicon</title>
					<path d="M12,2.2C6.4,2.2,1.9,6.7,1.9,12.2c0,4.4,2.9,8.2,6.9,9.6c0.5,0.1,0.7-0.2,0.7-0.5c0-0.2,0-0.9,0-1.7c-2.8,0.6-3.4-1.4-3.4-1.4C5.6,17.1,5,16.8,5,16.8C4.1,16.2,5,16.2,5,16.2c1,0.1,1.5,1,1.5,1c0.9,1.5,2.4,1.1,2.9,0.8c0.1-0.7,0.4-1.1,0.6-1.3c-2.2-0.3-4.6-1.1-4.6-5c0-1.1,0.4-2,1-2.7C6.5,8.8,6.2,7.7,6.7,6.4c0,0,0.8-0.3,2.8,1C10.3,7.2,11.1,7.1,12,7c0.9,0,1.7,0.1,2.5,0.3c1.9-1.3,2.8-1,2.8-1c0.5,1.4,0.2,2.4,0.1,2.7c0.6,0.7,1,1.6,1,2.7c0,3.9-2.4,4.7-4.6,5c0.4,0.3,0.7,0.9,0.7,1.9c0,1.3,0,2.4,0,2.8c0,0.3,0.2,0.6,0.7,0.5c4-1.3,6.9-5.1,6.9-9.6C22.1,6.7,17.6,2.2,12,2.2z" />
				</symbol>
				<clipPath id="polygon-clip-rhomboid" clipPathUnits="objectBoundingBox">
					<polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
				</clipPath>
			</defs>
		</svg>
		<main>
			<div class="slideshow" tabindex="0">
				<div class="slide slide--layout-1" data-layout="layout1">
					<div class="slide-imgwrap">
						<div class="slide__img" style="overflow: hidden;">
              <div class="slide__img-inner" style="background-color: white;width: 100%;height: 100%;" >
				<h3>&nbsp;第十二届蓝桥杯</h3>
                <table style="width: 100%;text-align: center;line-height: 24px;">
					<thead>
						<th>竞赛类型</th>
                  		<th>奖项数量</th>
					</thead>
					<tbody>
						<tr>
							<td>省级一等奖</td>
							<td>8</td>
						</tr>
						<tr>
							<td>省级二等奖</td>
							<td>13</td>
						</tr>
						<tr>
							<td>省级三等奖</td>
							<td>10</td>
						</tr>
					</tbody>
                </table>
				<h3>&nbsp;第十一届蓝桥杯</h3>
                <table style="width: 100%;text-align: center;line-height: 24px;">
					<thead>
						<th>竞赛类型</th>
                  		<th>奖项数量</th>
					</thead>
					<tbody>
						<tr>
							<td>国家二等奖</td>
							<td>1</td>
						</tr>
						<tr>
							<td>省级一等奖</td>
							<td>3</td>
						</tr>
						<tr>
							<td>省级二等奖</td>
							<td>10</td>
						</tr>
						<tr>
							<td>省级三等奖</td>
							<td>5</td>
						</tr>
					</tbody>
                </table>
				<h3>&nbsp;第十届蓝桥杯</h3>
                <table style="width: 100%;text-align: center;line-height: 24px;">
					<thead>
						<th>竞赛类型</th>
                  		<th>奖项数量</th>
					</thead>
					<tbody>
						<tr>
							<td>国家二等奖</td>
							<td>2</td>
						</tr>
						<tr>
							<td>国家三等奖</td>
							<td>2</td>
						</tr>
						<tr>
							<td>省级一等奖</td>
							<td>2</td>
						</tr>
						<tr>
							<td>省级二等奖</td>
							<td>17</td>
						</tr>
						<tr>
							<td>省级三等奖</td>
							<td>23</td>
						</tr>
					</tbody>
                </table>
				<h3>&nbsp;第九届蓝桥杯</h3>
                <table style="width: 100%;text-align: center;line-height: 24px;">
					<thead>
						<th>竞赛类型</th>
                  		<th>奖项数量</th>
					</thead>
					<tbody>
						<tr>
							<td>国家一等奖</td>
							<td>1</td>
						</tr>
						<tr>
							<td>国家二等奖</td>
							<td>1</td>
						</tr>
						<tr>
							<td>国家三等奖</td>
							<td>2</td>
						</tr>
						<tr>
							<td>省级一等奖</td>
							<td>5</td>
						</tr>
						<tr>
							<td>省级二等奖</td>
							<td>5</td>
						</tr>
						<tr>
							<td>省级三等奖</td>
							<td>3</td>
						</tr>
					</tbody>
                </table>
              </div>
            </div>
						<div class="slide__img" style="overflow: hidden;">
							<div class="slide__img-inner" style="background-color: white;width: 100%;height: 100%;">
								<h3>&nbsp;创新创业</h3>
								<table style="width: 100%;height:65%;text-align: center;line-height: 24px;">
									<thead>
										<th>竞赛类型</th>
										  <th>奖项数量</th>
									</thead>
									<tbody>
										<tr>
											<td>国家级</td>
											<td>4</td>
										</tr>
										<tr>
											<td>省级</td>
											<td>17</td>
										</tr>
										<tr>
											<td>校级</td>
											<td>7</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="slide__img">
							<div class="slide__img-inner"  style="overflow: hidden;background-color: white;">
								<h3>&nbsp;软著名单</h3>
								<table style="width: 100%;height:85%;text-align: center;line-height: 24px;">
									<thead>
										<th>著作人</th>
										  <th>软著名称</th>
									</thead>
									<tbody>
										<tr>
											<td>张顺海</td>
											<td>嗨抖短视频平台V1.0	</td>
										</tr>
										<tr>
											<td>张顺海、樊世杰、武凯焱、胡帅博</td>
											<td>就业工作考核数据分析系统V1.0	</td>
										</tr>
										<tr>
											<td>李士勇、侯志松、郝志超、徐康康、张梦鸽、刘阳阳</td>
											<td>城市管理系统V1.0</td>
										</tr>
										<tr>
											<td>李士勇、高国红、黄佳佳、王志成、陈书梦、刘阳阳</td>
											<td>蓝牙点名系统V1.0</td>
										</tr>
										<tr>
											<td>刘阳阳、韩健健、张雪、赵硕、刘杜鹃、丁赵雷</td>
											<td>商品报价服务平台系统V1.0</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">荣获证书</h3>
						<p class="slide__title-sub">在各个竞赛中小组成员取得了良好的成绩</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-2" data-layout="layout2">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/QQ截图20210428094307.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/QQ截图20210428094317.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/QQ截图20210428094327.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/QQ截图20210428094404.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春5.jpg);"><h4 class="slide__img-caption">Today is someday</h4></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">“创青春”河南省大学生创业大赛</h3>
						<p class="slide__title-sub">展示河南大学生创新能力与创业素质的综合赛事</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-3" data-layout="layout3">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春1.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春2.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春3.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/one.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春4.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/图1.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/创青春6.jpg);"></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">“创青春”比赛现场</h3>
						<p class="slide__title-sub">这一段写啥比较好</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-4" data-layout="layout4">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/QQ截图20210428094250.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/ACM集体合影.JPG);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/获奖组ACM合影.JPG);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/小组ACM集体合影.jpg);"></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">ACM竞赛</h3>
						<p class="slide__title-sub">经过近40年的发展，ACM国际大学生程序设计竞赛已经发展成为全球最具影响力的大学生程序设计竞赛</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-5" data-layout="layout5">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085613.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085721.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085733.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085739.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085807.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085811.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085814.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085821.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085825.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085828.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085831.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085835.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085838.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085842.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085849.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085852.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085856.png);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/TIM图片20190905085859.png);"></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">蓝桥杯大赛</h3>
						<p class="slide__title-sub">是国内始终领跑的人才培养选拔模式并获得行业深度认可的IT类科技竞赛</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-6" data-layout="layout6">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/新时代新梦想2.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/新时代新梦想1.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/新时代新梦想2.jpg);"></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">“新时代新梦想”创业大赛</h3>
						<p class="slide__title-sub">广大学生积极投身创新创业实践，敢闯会创，乘风破浪，立足专业</p>
					</div>
				</div><!-- /slide -->
				<div class="slide slide--layout-7" data-layout="layout7">
					<div class="slide-imgwrap">
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/CRM客户管理系统.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/交通信号控制系统.jpg);"></div></div>
						<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/awards/就业工作考核数据分析系统.jpg);"></div></div>
					</div>
					<div class="slide__title">
						<h3 class="slide__title-main">软著</h3>
						<p class="slide__title-sub">对于软件作品所享有的发表权、开发者身份权、使用权、使用许可权和获得报酬权各项专有权利</p>
					</div>
				</div><!-- /slide -->
				<nav class="slideshow__nav slideshow__nav--arrows">
					<button id="prev-slide" class="btn btn--arrow" aria-label="Previous slide"><svg class="icon icon--prev"><use xlink:href="#icon-prev"></use></svg></button>
					<button id="next-slide" class="btn btn--arrow" aria-label="Next slide"><svg class="icon icon--next"><use xlink:href="#icon-next"></use></svg></button>
				</nav>
			</div><!-- /slideshow -->
			
		</main>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/anime.min.js"></script>
		<script src="js/main.js"></script>
		<script>
		(function() {
			var slideshow = new MLSlideshow(document.querySelector('.slideshow'));
			setInterval(() => {
				slideshow.next()
			}, 2000);
			// document.querySelector('#next-slide').addEventListener('click', function() {
			// 	slideshow.next();
			// });

			// document.querySelector('#prev-slide').addEventListener('click', function() {
			// 	slideshow.prev();
			// });
		})();
		</script>
	</body>
</html>
